<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Regular.js • Parsed body</title>
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <script src="../../dist/regular.js"></script>
  </head>
  <body>

    <div id="app">
      
    </div>

    <!-- Templates -->
    <script id="modal" type="text/regular" name='modal'>
      <div class="modal show {{clazz}}">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" on-click={{this.close()}} data-dismiss="modal" aria-hidden="true">×</button>
              <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
             <!-- use r:content as placeholder for passin body -->
              <r-content />
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" on-click={{this.close()}} >Close</button>
              <button type="button" class="btn btn-primary" on-click={{this.confirm()}}>Confirm</button>
            </div>
          </div>
        </div>
      </div>
    </script>
    
    <script>
    var Modal = Regular.extend({
      template: '#modal',
      init: function(){
        if(!this.$parent) this.inject(document.body)
      },
      close: function(){
        this.$emit('close');
        this.destroy();
      },
      confirm: function(){
        this.$emit('confirm', this.data);
        this.destroy();
      }
    });



    var App = Regular.extend({
      // the <a> link passed in modal is a group body;
      template:'<modal title="title"><a href="#" on-click={{this.click()}}>hello</a></modal>',
      click: function(){
        alert('passin-body"s context is outer component ')
      }
    })

    var app = new App({data: {title: "hahaha"}}).inject('#app');


   
    </script>
  </body>
</html>
